<style lang="sass" scoped>
    .container{
    }
    .search-cont{
        padding-top:50px;
        padding-left:40px;
        padding-right:34px;
        align-items:center;
    }
    .input{
        width:588px;
        height:75px;
        background:#e7e7e7;
        align-items:center;
        padding:0 22px;
        border-radius:40px;
        .search-icon{
            width:43px;
            height:43px;
        }
        input{
            background:#e7e7e7;
            font-size:28px;
            color:#3C3C3C;
            padding:0 16px;
            flex:1;
        }
        .del-icon{
            width:24px;
            height:23px;
        }
    }
    .search-btn{
        flex:1;
        text-align:right;
        color:#00BEFF;
        font-size:32px;
    }
    .list-cont{
        margin-top:40px;
        &>.title{
            text-align:center;
            font-size:30px;
            color:#3C3C3C;
            padding-bottom:19px;
            border-bottom:1px solid #e2e2e2;
            div{
                font-size:30px;
            }
            img{
                display:block;
                width:43px;
                height:16px;
                margin:0 auto;
            }
        }
        .group{
            padding:20px 40px;
            border:1px solid #e2e2e2;
            img{
                width:260px;
                height:260px;
                margin-right:32px;
            }
            .detail{
                flex:1;
                text-align:left;
                .title{
                    text-align:left;
                    font-size:32px;
                    color:#3C3C3C;
                }
                .cont{
                    text-align:left;
                    font-size:30px;
                    color:#3C3C3C;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
            }
        }
    }
    .no{
        margin-top:195px;
        img{
            display:block;
            margin:0 auto 40px;
            width:374px;
            height:286px;
        }
        div{
            color:#B4B4B4;
            font-size:30px;
            text-align:center;
        }
    }
</style>
<template>
    <div class="container">
       <div class="search-cont flex">
           <div class="input flex">
               <img @click="getList()" class="search-icon" src="../../assets/images/scanbook/search.png" alt="">
               <input v-model.trim="keyWord" type="text">
               <img @click="keyWord=''" class="del-icon" src="../../assets/images/scanbook/del.png" alt="">
           </div>
           <div  @click="getList()" class="search-btn">搜索</div>
       </div>
       <div v-if="list.length>0" class="list-cont">
           <div class="title">
               <div>已搜索到以下绘本，请放心阅读</div>
               <img src="../../assets/images/scanbook/down.png">
           </div>
           <div v-for="(item,i) in list" class="group flex">
               <img :src="item.faceImg" alt="">
               <div class="detail">
                   <div class="title" v-html="item.bookName"></div>
                   <div class="cont">{{item.introduce}}</div>
               </div>
           </div>
       </div>
       <div v-if="list.length===0&&!searching" class="no">
           <img src="../../assets/images/scanbook/no.png" alt="">
           <div>暂时未支持</div>
           <div>已反馈官方尽快支持</div>
       </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                list:[],
                searching:true,
                keyWord:'',
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
            });
        },
        methods: {
            getList(){
                this.searching = true;
                util.ajax({
                   url:config.baseApi + 'bookMall-h5/api/select/queryBooks',
                    data:{
                       keyWord:this.keyWord
                    },
                    success:(data=>{
                        data.data.forEach(item=>{
                            item.bookName = item.bookName.replace(this.keyWord,`<span style="color:#FF7373">${this.keyWord}</span>`)
                        })
                        this.list = data.data;
                        this.searching = false;
                    })
                })
           }
        },
        
    };
</script>